<!--
* @Author: 张昊
* @Date:  2022-12-12 16:10:01
* @FilePath: /pages/mine/PurchaseRecord/PurchaseRecord.vue
* @Description: 购买记录
-->
<template>
	<view class="order">
		<view class="common-list card" v-for="(item, index) in detailsItems" :key="item.id">
			<view class="img"><image class="img" :src="item.order_goods[0].image" :alt="item.image" /></view>

			<view class="img-list">
				<view class="img-title">购买课程:{{ item.order_goods[0].title }}</view>

				<view class="img-text">
					<view class="remarks">
						<text>购买数量:{{ item.order_goods[0].nums }}</text>

						<u-tag v-if="orderstate[item.orderstate]" :text="orderstate[item.orderstate]" shape="circle" plain size="mini" :type="!item.paystate ? 'warning' : 'success'"></u-tag>
					</view>
					<text class="remarks">购买日期:{{ $u.timeFormat(item.paytime, 'yyyy年mm月dd日') }}</text>

					<view class="remarks">
						<text>购买价格:{{ item.goodsprice }}</text>
						<u-tag v-if="item.orderstate === 0 && !item.paystate" text="待支付" size="mini" type="success" @click="clickShopping(item)"></u-tag>
						<u-tag v-if="item.orderstate === 0 && !item.paystate" text="取消订单" size="mini" type="error" @click="cancelShopping(item)"></u-tag>
					</view>
					<text class="remarks"></text>
				</view>
			</view>
		</view>
		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="flag"></txt-pulldown>
	</view>
</template>

<script>
import {
	order,
	cancel, // 取消订单
	payment // 支付调取页面
} from '@/common/api.js';
import onReachBottom from '@/common/mixin/onReachBottom.js';
const orderstate = [null, '已取消', '已失效', '已完成', '退货退款中'];
export default {
	mixins: [onReachBottom],
	data() {
		return { detailsItems: [], userData: {}, paystate: null, orderstate };
	},
	methods: {
		async reqPaging() {
			let userData = uni.getStorageSync('userData');
			this.userData = userData;
			let params = this.params;
			let { data: counselTeacherOrderData, total: counselTeacherOrderTotal } = await order({ params: { limit: 10, page: this.num, paystate: this.paystate } });
			this.detailsItems = [...this.detailsItems, ...counselTeacherOrderData];
			// console.log('老师购买记录', this.detailsItems);
			this.total = counselTeacherOrderTotal;
		},
		// 点击重新下单
		async clickShopping(item) {
			// console.log('item', item);
			// let details = {
			// 	image: item.order_goods[0].image,
			// 	title: item.order_goods[0].title,
			// 	// 市场售价:
			// 	marketprice: item.order_goods[0].marketprice,
			// 	price: item.order_goods[0].price,
			// 	// 关键字:
			// 	keywords: item.order_goods[0].keywords,
			// 	// 库存
			// 	stocks: item.order_goods[0].stocks,
			// 	// 描述
			// 	content: item.order_goods[0].content,
			// 	// 多少人购买
			// 	sales: item.order_goods[0].sales,
			// 	id: item.order_goods[0].id,
			// 	num: item.order_goods[0].nums || 1
			// };
			// uni.setStorageSync('shoppingDetails', details);
			// uni.navigateTo({
			// 	url: '/pages/class/details/details'
			// });
			// 先打开优惠券页面
			// this.show = true

			// 得到支付逻辑
			let { appId, nonceStr, package: wxpackage, paySign, signType, timeStamp } = await payment({
				orderid: item.order_sn,
				paytype: 'wechat'
			});
			// 支付

			wx.requestPayment({
				timeStamp,
				nonceStr,
				package: wxpackage,
				signType,
				paySign,
				success(res) {
					console.log('微信调取成功', res);
					uni.navigateBack({
						delta: 1
					});
					uni.$u.toast('支付成功');
				},
				fail(res) {
					console.log('微信调取失败', res);
					uni.$u.toast('支付失败,请查看课时是否足够');
				}
			});
		},
		// 取消订单
		async cancelShopping(item) {
			await cancel({ orderid: item.order_sn });
		}
	},
	async onLoad(params) {
		this.paystate = params.paystate;
		this.paystate && (await this.reqPaging());
	}
};
</script>

<style lang="scss">
.common-list {
	// width: 100%;

	// height: 159rpx;
	padding: 30rpx 44rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.img {
		width: 138rpx;
		height: 134rpx;
	}
	.img-list {
		flex: 1;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 23rpx;
		.img-title {
			font-size: 28rpx;
			color: #3b3a3f;
		}
		.img-text {
			display: flex;
			flex-direction: column;
			.num {
				color: #f77b4b;
			}
			.remarks {
				font-size: 22rpx;
				color: #a1a3a7;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
	.buttons {
		width: 150rpx;
		height: 130rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.tag {
			// width: ;
		}
	}
}
</style>
